<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学生主页-活动广场</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../js/jquery-3.1.1.min.js"></script>
    <style>
        #main_body {
            position: absolute;
            width: 1000px;
            left: 0;
            height: 606px;
        }

        #fixed {
            position: absolute;
            right: 0;
            width: 300px;
            height: 450px;
            position: fixed;
        }

        .in_fix {
            width: 200px;
            margin: 10px 10px;
            margin-left: 50px;
        }

        .in_fix p {
            font-size: 13px;
            text-align: center;
            padding: 10px;
        }

        #zi {
            height: 40px;
            background-color: rgb(211, 211, 211);
        }

        .activity {
            margin: 20px 8%;
            width: 900px;
            height: 300px;
        }

        .touxiang img {
            width: 50px;
        }

        .touxiang {
            float: left;
            height: 200px;
            width: 100px;
            text-align: center;
        }

        .container {
            float: left;
            width: 700px;
            border-radius: 20px;
            border-top-left-radius: 0;
            box-shadow: 3px 3px 5px 2px rgb(187, 187, 187);
        }

        .title {
            font-size: 20px;
            margin: 15px 40px;
            font-weight: 500;
            letter-spacing: 3px;
        }

        .img_con img {
            height: 150px;
            border-radius: 10px;
            display: inline-block;
            vertical-align: top;
        }

        .img_con {
            width: 650px;
            margin: 25px 40px;
        }

        .content {
            width: 240px;
            display: inline-block;
            font-size: 15px;
            line-height: 25px;
            padding-left: 27px;
        }

        .bottom {
            position: relative;
            height: 50px;
        }

        .time {
            letter-spacing: 1px;
            font-size: 10px;
            position: absolute;
            right: 40px;
        }

        .blew_time {
            position: absolute;
            bottom: 12px;
            right: 40px;
            font-weight: 800;
            font-size: 15px;
            font-family: 'SimHei';
        }

        .peopleNum {
            display: inline-block;
            margin-right: 20px;
            color: rgb(156, 156, 156);
        }

        .join {
            display: inline-block;
            margin-right: 20px;
            color: rgb(88, 88, 88);
        }

        .xiangqing {
            display: inline-block;
            color: #4D67F8;
        }

        .xiangqing:hover {
            color: #269AFF;
        }

        .join button {
            border: none;
            background: none;
            cursor: pointer;
            vertical-align: bottom;
        }

        .join button img {
            width: 16px;
        }
    </style>
</head>

<body>
    <div class="easyui-layout" data-options="fit:true,border:false">
        <div data-options="region:'center'" style="height:59%;">
            <table id="curInfor"></table>
        </div>
    </div>
    <div id="main_body">
        <!-- <div class="activity">
            <div class="touxiang">
                <img src="../images/student_group.png" alt="">
            </div>
            <div class="container">
                <div class="title">追光信息 | 艺心抗疫，春日云派对</div>
                <div class="img_con">
                    <img src="../images/toutu.png" class="toutu" alt="">
                    <div class="content">
                        <p>
                            &ensp;&ensp;&ensp;&ensp;暖春将至，我们仍会怀揣希望，惟愿疫情早日消散，惟愿山河无恙、人间皆安。
                            <br />&ensp;&ensp;&ensp;&ensp; 春意渐浓，让我们把希望写成诗句，表达对疫情早日消散、尽情享受春日的美好期盼。
                        </p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="time">2022/04/07 18:50</div>
                    <div class="blew_time">
                        <div class="peopleNum"><span id="num">40</span>人已参加</div>
                        <div class="join">
                            <button class="joinin"><img src="../images/join.png" alt=""></button>
                            <text>参加活动</text>
                        </div>
                        <a href="xiangqing.html" class="xiangqing">查看详情>></a>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
    <div id="fixed">
        <div class="in_fix" id="zi">
            <p>扫描二维码关注北林信息人</p>
        </div>
        <img class="in_fix" id="QR" src="../images/QR.png" alt="">
        <button type="button" class="layui-btn layui-btn-warm in_fix qingqiao">点击进入青桥网</button>
        <button type="button" class="layui-btn layui-btn-danger in_fix zhiyuan"
            style=" margin-left: 50px;">点击进入志愿北京</button>
    </div>
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
    <script src="../js/test_login.js"></script>
    <script>
        function storage(obj) {
            var current = obj.parentNode.parentNode.parentNode.childNodes[1].innerText; //活动名称
            localStorage.setItem("current", current);
            localStorage.setItem("status", 0); //是否提交材料
        }

        function join(obj) {
            var current = obj.parentNode.parentNode.parentNode.parentNode.childNodes[1].innerText;
            var a_no = JSON.parse(localStorage.getItem(current)).a_no;
            if ($(obj).siblings("text").text() != '已参加') {
                var myDate = new Date();
                var time = myDate.toLocaleDateString();
                $.get('/join', {
                    "a_no": a_no,
                    "time": time,
                    "isJoin": "yes"
                }, function (re) {
                    if (re == '0') {
                        alert('参加失败');
                    } else {
                        $(obj).children("img").attr('src', '../images/ok.png')
                        $(obj).siblings("text").text('已参加');
                    }
                })
            } else {
                $.get('/join', { //取消加入
                    "a_no": a_no,
                    "isJoin": "no"
                }, function (re) {
                    if (re == '0') {
                        alert('取消失败');
                    } else {
                        $(obj).children("img").attr('src', '../images/join.png')
                        $(obj).siblings("text").text('参与活动');
                    }
                })
            }
        }
        layui.use(['jquery', 'layer', 'miniAdmin', 'miniTongji'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                miniAdmin = layui.miniAdmin,
                miniTongji = layui.miniTongji;
            $('.qingqiao').on("click", function () {
                window.open(
                    'http://qq.bjfu.edu.cn/XueSheng/Login.aspx?path=%2fXueSheng%2fMyactivities.aspx',
                    'top');
            });
            $('.zhiyuan').on("click", function () {
                window.open('https://www.bv2008.cn/', 'top');
            });
            $('.joinin').on("click", function () {
                $('.joinin img').attr('src', '../images/ok3.png')
                $('.join text').text('已参加');

            })
            $(function () {
                $.get('/showActivity', {
                    status: 2,
                    manager:"1001"
                }, function (re) {
                    if (re == '0') {
                        layer.msg("暂无活动");
                        $('#main_body').css({
                            "background-image": "url(../images/noActivity.png)",
                            "background-size": "100% 100%"
                        });
                    } else {
                        var obj = re.data;
                        var len = re.count;
                        var html = "";
                        for (var i = 0; i < len; i++) {
                            localStorage.setItem(obj[i].a_name, JSON.stringify(obj[i]));
                            if (obj[i].link == "http://balabala.com") {
                                obj[i].link =
                                    "https://s2.loli.net/2022/05/09/j7FrW4bzJ1nc5Ue.png"
                            }; //搞搞！
                            html = html +
                                '<div class="activity"><div class="touxiang"><img src="../images/' +
                                obj[i].m_id + '.png" alt=""></div><div class="container">\
                                    <div class="title">' + obj[i].a_name + '</div><div class="img_con"><img src="' +
                                obj[i].link + '" class="toutu" alt=""><div class="content">\
                                  <p>' + obj[i].intro + '</p></div></div><div class="bottom"><div class="time">' + obj[
                                    i].e_time + '</div><div class="blew_time"><div class="peopleNum">\
                                      <span id="num">' + obj[i].s_num +
                                '</span>人已参加</div><div class="join"><button class="joinin" onclick="join(this)"><img src="../images/join.png" alt=""></button>\
                                <text>参加活动</text></div><a href="xiangqing.html" class="xiangqing" onclick="storage(this)">查看详情>></a></div></div></div></div>'
                        }
                        $('#main_body').html(html);
                    }
                })
            })
        });
    </script>
</body>